<template>
	<el-dialog v-model="props.show" width="1000" close-icon="CloseBold" :show-close="false" class="c2c-no-padding-dialog" @close="close">
		<template #header="{ close }">
			<div class="h-40px flex items-center">
				<div class="bg-[#000000] w-50% h-100% rounded-tl-16px "></div>
				<div class="bg-[#ffffff] w-50% h-100% rounded-tr-16px flex items-center justify-end">
					<el-icon class="mr-20px cursor-pointer">
						<CloseBold @click="close" />
					</el-icon>
				</div>
			</div>
		</template>
		<template #default>
			<div class="flex">
				<div class="bg-[#000000] w-50% rounded-bl-16px ">
					<CardMessage></CardMessage>
				</div>
				<div class="bg-[#ffffff] w-50% rounded-br-16px">
					<OptionalPay></OptionalPay>
				</div>
			</div>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import CardMessage from './CardMessage.vue';
import OptionalPay from './OptionalPay.vue';
interface IProps {
	show: boolean;
}
const props = defineProps<IProps>();
const emit = defineEmits(['close']);

const close = () => {
	emit('close',false);
};

</script>
<style lang="scss" scoped></style>
